<template>
  <div class="container">
    <Category title="美食" :listData="foods">
      <img slot="center" src="https://qcloud.dpfile.com/pc/R8HgTsOfGDEysh7eaNI2z6aPbhnW3iaVRBbNbejMiKudxBVf06W34QcwP5N5Ww6B.jpg" alt="">
      <a slot="footer" href="https://qcloud.dpfile.com/pc/R8HgTsOfGDEysh7eaNI2z6aPbhnW3iaVRBbNbejMiKudxBVf06W34QcwP5N5Ww6B.jpg" target="_blank">点我查看大图</a>
    </Category>
    <Category title="游戏" :listData="games">
      <ul slot="center">
        <li v-for="(g,index) in games" :key="index">{{g}}</li>
      </ul>
      <div class="foot" slot="footer">
        <a href="https://qcloud.dpfile.com/pc/R8HgTsOfGDEysh7eaNI2z6aPbhnW3iaVRBbNbejMiKudxBVf06W34QcwP5N5Ww6B.jpg" target="_blank">单机游戏</a>
        <!-- &nbsp;&nbsp;&nbsp;是不会生效的，&nbsp;不属于结构，只会把slot所在的元素放入插槽中 -->
        <a href="https://qcloud.dpfile.com/pc/R8HgTsOfGDEysh7eaNI2z6aPbhnW3iaVRBbNbejMiKudxBVf06W34QcwP5N5Ww6B.jpg" target="_blank">网络游戏</a>
      </div>
      <a slot="footer" href="https://qcloud.dpfile.com/pc/R8HgTsOfGDEysh7eaNI2z6aPbhnW3iaVRBbNbejMiKudxBVf06W34QcwP5N5Ww6B.jpg" target="_blank">其他游戏</a>
    </Category>
    <Category title="电影" :listData="films">
      <img slot="center" src="https://img2.baidu.com/it/u=989013748,2891148432&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=716"></img>
      <!-- <video controls src="https://img2.baidu.com/it/u=989013748,2891148432&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=716"></video> -->
      <div class="foot" slot="footer">
        <a href="https://qcloud.dpfile.com/pc/R8HgTsOfGDEysh7eaNI2z6aPbhnW3iaVRBbNbejMiKudxBVf06W34QcwP5N5Ww6B.jpg" target="_blank">经典</a>
        <a href="https://qcloud.dpfile.com/pc/R8HgTsOfGDEysh7eaNI2z6aPbhnW3iaVRBbNbejMiKudxBVf06W34QcwP5N5Ww6B.jpg" target="_blank">热门</a>
        <a href="https://qcloud.dpfile.com/pc/R8HgTsOfGDEysh7eaNI2z6aPbhnW3iaVRBbNbejMiKudxBVf06W34QcwP5N5Ww6B.jpg" target="_blank">推荐</a>
      </div>
      <h1 class="hh" slot="footer">欢迎来观影！</h1>
    </Category>
    
    <!-- 多个元素想要写入同一个插槽，还不想生成多余元素，可以使用template包裹，例如上面的电影 -->
    <Category title="电影2" :listData="films">
      <img slot="center" src="https://img2.baidu.com/it/u=989013748,2891148432&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=716"></img>
      <!-- <video controls src="https://img2.baidu.com/it/u=989013748,2891148432&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=716"></video> -->
      <!-- <template slot="footer"> 当使用了template，就可以使用v-slot指定插槽，vue2.6新提出来的-->
      <template v-slot:footer>
        <div class="foot">
          <a href="https://qcloud.dpfile.com/pc/R8HgTsOfGDEysh7eaNI2z6aPbhnW3iaVRBbNbejMiKudxBVf06W34QcwP5N5Ww6B.jpg" target="_blank">经典</a>
          <a href="https://qcloud.dpfile.com/pc/R8HgTsOfGDEysh7eaNI2z6aPbhnW3iaVRBbNbejMiKudxBVf06W34QcwP5N5Ww6B.jpg" target="_blank">热门</a>
          <a href="https://qcloud.dpfile.com/pc/R8HgTsOfGDEysh7eaNI2z6aPbhnW3iaVRBbNbejMiKudxBVf06W34QcwP5N5Ww6B.jpg" target="_blank">推荐</a>
        </div>
        <h1 class="hh">欢迎来观影！</h1>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from './components/Category'

export default {
    name:'App',
    components:{Category},
    data() {
      return {
        foods:['火锅','烧烤','小龙虾','牛排'],
        games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
        films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']
      }
    }
}
</script>
<style scoped>
.container{
  display: flex;
  /* 主轴对齐方式 */
  justify-content: space-around; 
}
img{
    width: 100%;
    height: 50%;
}
.foot{
  display: flex;
  /* 主轴对齐方式 */
  justify-content: space-around; 
}
.hh{
  text-align: center;
}
</style>
